<template>
  <div class="custom-dialog" v-if="modelValue">
    <div class="custom-dialog_box">
      <div class="close-box" @click="close">
        <img src="@/assets/images/close.svg" class="close-icon">
      </div>
      <div class="custom-dialog_main">
        <slot></slot>
      </div>
      <div class="custom-dialog_foot">
        <div class="confirm" @click="confirm">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import { ref, watch } from "vue"

const emits = defineEmits(["update:modelValue", "handleClose", "handleConfirm"])

const props = defineProps({
  title: "",
  modelValue: {
    type: Boolean,
    require: true
  }
})

// 确定
const confirm = () => {
  emits("update:modelValue", false)
  emits("handleConfirm")
}

// 关闭弹框
const close = () => {
  emits("update:modelValue", false)
  emits("handleClose")
}
</script>
<style scoped lang="scss">
.custom-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(4, 11, 19, 0.57);
  z-index: 999 !important;
  display: flex;
  justify-content: center;
  align-items: center;

  &_box {
    background: #0A202C;
    border-radius: vw(11);
    padding-left: vw(32);
    padding-right: vw(16);
    border: 1px solid rgba(30, 92, 119, 1);
  }

  &_main {
    border-bottom: 1px solid rgba(255, 255, 255, 0.19);
  }

  .close-box {
    top: vh(18);
    right: vh(18);
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    padding: vh(15) 0;

    .close-icon {
      width: vw(20);
    }
  }

  .custom-dialog_foot {
    height: vh(100);
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .confirm {
      width: vw(77);
      height: vh(24);
      background: #B3DD4D;
      border-radius: 4px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: vw(14);
      color: #000000;
      line-height: vh(24);
      text-align: center;
      margin-right: vw(37);
      cursor: pointer;
    }
  }
}
</style>